<template>
    <div :ref="$options.name" class="chartInstance" />
</template>
<script>
    import chartmixins from '../../util/echartmixins'
    import { colorOptions } from '../../util/common.js'
    import { brandData, motorcycleData } from '../../util/pie-mock-data'
    export default {
        name: 'Pie-group',
        components: {},
        props: {
            outsideData: {
                type: Array,
                default: () => []
            },
            
            insideData: {
                type: Array,
                default: () => []
            },

            labelKey: {
                type: String,
                default: 'name'
            },

            valueKey: {
                type: String,
                default: 'value'
            },

            model: {
                type: String,
                default: 'nromal'
            },

            chartStyle: {
                type: Object,
                default: () => {
                    return {
                        'labelColor': '#e5e5e5',
                    }
                }
            }
        },
        mixins: [chartmixins],
        data() {
            return {
                defaultOptions: {
                    color: colorOptions[this.model],

                    series: [{
                            name: "访问来源",
                            type: "pie",
                            selectedMode: "single",
                            radius: [0, "30%"],

                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false,
                                    },
                                }
                            },
                            data: [],
                        },
                        {
                            name: "访问来源",
                            type: "pie",
                            radius: ["55%", "65%"],

                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        color: this.chartStyle.labelColor,
                                        fontSize: this.formatFontSize(12)
                                    },

                                    labelLine: {
                                        length: this.formatFontSize(30),
                                        length2: this.formatFontSize(50),

                                        lineStyle: {
                                            width: this.formatFontSize(1.5)
                                        }
                                    },
                                }
                            },
                            data: [],
                        },
                    ]
                }
            }
        },
        watch: {
            outsideData() {
                this.refreshOutsideData()
            },

            insideData() {
                this.refreshInsideData()
            }
        },  
        computed: {

        },
        methods: {
            refreshOutsideData(chartData = this.outsideData) {
                const seriesData = chartData.map(item => {
                    return {
                        name: item[this.labelKey],
                        value: item[this.valueKey]
                    }
                })
                this.defaultOptions.series[1].data = seriesData
                this.setOption(this.defaultOptions, true)
            },

            refreshInsideData(chartData = this.insideData) {
                const seriesData = chartData.map(item => {
                    return {
                        name: item[this.labelKey],
                        value: item[this.valueKey]
                    }
                })
                this.defaultOptions.series[0].data = seriesData
                this.setOption(this.defaultOptions, true)
            }
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {
            this.refreshOutsideData(motorcycleData)
            this.refreshInsideData(brandData)
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped horizontalvw>
    .chartInstance {
        width: 100%;
        height: 100%;
    }
</style>